<template>
  <div>
    <el-card class="content scrollbar">
      <el-form class="search ml20" :inline="true" label-suffix="：" size="mini">
        <el-form-item label="单位名称">
          <el-input v-model="search.drugUnitName" clearable class="w150" placeholder="请输入单位名称"
            @keyup.enter.native="getList('search')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList('search')">确定
          </el-button>
          <el-button @click="searchReset">重置
          </el-button>
        </el-form-item>
        <el-form-item class="ml50">
          <el-button type="primary" @click="detailBtn('新增',{})">新增
          </el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" size="small" height="72vh" :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass">
        <ElTableColumn label="单位编码" prop="drugUnitCode" width="120" />
        <ElTableColumn label="药品单位" prop="drugUnitName" />
        <ElTableColumn label="三方编码" prop="thirdCode" />
        <ElTableColumn label="创建方式" prop="dataSourceName" />
        <ElTableColumn label="创建日期" prop="createTime" />
        <ElTableColumn label="创建人" prop="createBy" />
        <ElTableColumn label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="detailBtn('修改',row)">修改</el-button>
            <el-button size="mini" @click="hint('del','此操作将永久删除该单位',row)">删除</el-button>
          </template>
        </ElTableColumn>
      </el-table>
      <!-- <pagination
      class="page tc mt10"
      :total="page.total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="getList"
    /> -->
      <el-dialog :close-on-click-modal="false" :title="dialogTit" :visible.sync="dialogVisible" width="30%">
        <el-form ref="detail" :model="detail" class="search ml20" :inline="true" size="mini" label-position="right"
          label-width="100px">
          <el-form-item v-if="dialogTit=='修改'" label="单位编码">
            <el-input v-model="detail.drugUnitCode" disabled class="w300" />
          </el-form-item>
          <el-form-item label="单位名称">
            <el-input v-model="detail.drugUnitName" class="w300" maxlength="10" show-word-limit placeholder="请输入单位名称" />
          </el-form-item>
          <el-form-item label="三方编码">
            <el-input v-model="detail.thirdCode" class="w300" placeholder="请输入三方编码" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="createDetail('detail')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>

// import SidebarItem from './SidebarItem';
// import pagination from '@/components/Pagination';
import { unitList, unitAdd, unitUpdate, unitDelete } from '@/api/drugs';
// import { mapGetters } from 'vuex';
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Search {
  drugUnitName = ''; // 分类名称
}
class Options {
  options = [
    { id: 1, name: '选项一' },
    { id: 2, name: '选项二' },
    { id: 3, name: '选项三' },
    { id: 4, name: '选项四' }
  ];
}
class Detail {
  drugUnitCode = '';
  drugUnitName = '';
  thirdCode = '';
}
export default {
  components: {
    // pagination
  },
  data () {
    return {
      search: new Search(), // 检索条件
      options: new Options(), // 选项
      page: new Page(), // 分页
      detail: new Detail(), // 提交信息
      searchD: '', // 搜索医生
      dialogVisible: false, // 添加编辑
      name: '', // 类型名称
      dialogTit: '', // 弹窗名称
      list: [] // 列表
    };
  },
  computed: {
    // ...mapGetters(['permission'])
  },

  mounted () {
    // this.getList();
  },
  methods: {
    async getList () {
      try {
        const { data } = await unitList({
          ...this.search
        });
        // console.log(data);
        this.list = data;
        // this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    // 详情跳转
    detailBtn (nameType, row) {
      this.dialogVisible = true;
      this.dialogTit = nameType;
      console.log(row);
      const { id, drugUnitCode, drugUnitName, thirdCode } = row;
      this.detail = {
        id: id, drugUnitCode: drugUnitCode, drugUnitName: drugUnitName, thirdCode: thirdCode
      };
    },
    // 搜索重置
    searchReset () {
      this.search = new Search();
      this.getList();
    },
    // 提交
    createDetail (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let hintText = this.dialogTit == '新增' ? `新增${this.detail.drugUnitName}` : `修改${this.detail.drugUnitName}`;
          this.hint('create', hintText);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 确认提示
    hint (status, hintText, row) {
      this.$confirm(`${hintText}, 是否确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          switch (status) {
            case 'del':
              this.delRow(row);
              break;
            case 'create':
              this.submitBrand(row);
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    // 删除
    async delRow (row) {
      const res = await unitDelete({
        id: row.id
      });
      this.$notification('操作成功', 'success', res.msg);
      this.getList();
    },
    // 提交接口
    async submitBrand () {
      const res = this.dialogTit == '新增' ? await unitAdd({
        ...this.detail
      }) : await unitUpdate({
        ...this.detail
      });
      // console.log(res);
      this.$notification('操作成功', 'success', res.msg);
      this.dialogVisible = false;
      this.getList();

      // console.log(res);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  // height: calc(100% - 56px);
  // overflow-y: hidden;
  height: 82vh;
  ::v-deep img {
    width: 50px;
    border-radius: 4px;
    margin-top: 6px;
  }
}
.content:hover {
  overflow-y: auto;
}
</style>
